<template>
    <div>
        <div class="container" v-if="allData">
            <div class="nav">
                <div>
                    <router-link :to="'/carList?userId='+toId" tag="a"></router-link>
                </div>
                <div>
                    <span>{{allData.name}}</span>
                </div>
                <div @click="subnav = !subnav">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
                    <div class="subnav" v-show="subnav">
                        <router-link to="/" tag="a">首页</router-link>
                        <router-link to="/news" tag="a">资讯</router-link>
                        <router-link to="/video" tag="a">视频</router-link>
                        <router-link to="/seek" tag="a">找车</router-link>
                        <router-link to="/plaint" tag="a">汽车投诉</router-link>
                    </div>
                </div>
            </div>
            <div class="sub_nav">
                <ul>
                    <li>
                        <span class="con">综述</span>
                    </li>
                    <li>
                        <span>报价</span>
                    </li>
                    <li>
                        <span>图片</span>
                    </li>
                    <li>
                        <span>参数配置</span>
                    </li>
                    <li>
                        <span>经销商</span>
                    </li>
                    <li>
                        <span>口碑</span>
                    </li>
                    <li>
                        <span>文章</span>
                    </li>
                    <li>
                        <span>团购</span>
                    </li>
        
        
                </ul>
            </div>
            <div class="car_img">
                <img :src="allData.src" alt="">
            </div>
            <div class="car_info">
                <div class="left">
                    <div class="img">
                        <img src="../assets/img/car_info.png" alt="">
                    </div>
                    <div class="txt">
                        <h4>{{allData.name}}</h4>
                        <span>14.9888-18.5288万元</span>
                    </div>
                </div>
                <div class="right">
                    <router-link :to="{ path: '/carPrice', query: { name: allData.name, img: allData.src }}" tag="a">查询低价</router-link>
                </div>
            </div>
            <div class="car_info2">
                <ul>
                    <li>
                        <span><strong>品&nbsp;&nbsp;&nbsp;&nbsp;牌：</strong></span>
                        大众
                    </li>
                    <li>
                        <span><strong>排&nbsp;&nbsp;&nbsp;&nbsp;量：</strong></span>
        
                    </li>
                    <li>
                        <span><strong>级&nbsp;&nbsp;&nbsp;&nbsp;别：</strong></span>
                        紧凑型
                    </li>
                    <li>
                        <span><strong>变速箱：</strong></span>
                        手动
                    </li>
                    <li>
                        <span><strong>颜&nbsp;&nbsp;&nbsp;&nbsp;色：</strong></span>
                        <div class="color">
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                            <a href="javascript:;"></a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="wrap">
                <a href="javascript:;">
                    查看更多参数配置
                </a>
            </div>
            <div class="car_tit">
                <h2>
                    <span>车型</span>
                </h2>
                <div class="tab">
                    <span>在售</span>
                    停售
                </div>
            </div>
            <p class="p_tit">
                2022
            </p>
            <div class="lists">
                <h2>2022款 Pro 极智版</h2>
                <p>
                    <span>厂商指导价：18.5288万</span>
                    最低参考价：
                    <em>17.72万</em>
                </p>
                <div class="lists_nav">
                    <div>购车计算</div>
                    <div>加入对比</div>
                    <div class="lis">询最低价</div>
                </div>
            </div>
            <div class="lists">
                <h2>2022款 Active Pure 纯净智享版</h2>
                <p>
                    <span>厂商指导价：14.9888万</span>
                    最低参考价：
                    <em>14.38万</em>
                </p>
                <div class="lists_nav">
                    <div>购车计算</div>
                    <div>加入对比</div>
                    <div class="lis">询最低价</div>
                </div>
            </div>
            <div class="wrap">
                <a href="javascript:;">
                    查看更多在售车型
                </a>
            </div>
            <div class="car_tit">
                <h2>
                    <span>资讯</span>
                </h2>
                <div class="tab tab_col">
                    <span>新闻</span>
                    <span>评测</span>
                    导购
                </div>
            </div>
            <div class="new">
                <a href="topic.html">
                    <div class="item">
                        <div class="img">
                            <img src="../assets/img/U0.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>天津定向新增2万个个人普通小客车指标</h4>
                            <span>2022-09-23 </span>
                        </div>
                    </div>
                </a>
                <a href="topic.html">
                    <div class="item">
                        <div class="img">
                            <img src="../assets/img/U0.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>天津定向新增2万个个人普通小客车指标</h4>
                            <span>2022-09-23 </span>
                        </div>
                    </div>
                </a>
                <a href="topic.html">
                    <div class="item">
                        <div class="img">
                            <img src="../assets/img/U0.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>天津定向新增2万个个人普通小客车指标</h4>
                            <span>2022-09-23 </span>
                        </div>
                    </div>
                </a>
                <a href="topic.html">
                    <div class="item">
                        <div class="img">
                            <img src="../assets/img/U0.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>天津定向新增2万个个人普通小客车指标</h4>
                            <span>2022-09-23 </span>
                        </div>
                    </div>
                </a>
        
            </div>
            <div class="wrap">
                <a href="javascript:;">
                    查看更多
                </a>
            </div>
            <div class="group">
                <div class="col">
                    <div class="first">
                        <strong>大众ID.3团购</strong>
                    </div>
                    <div class="second">
                        途观团购
                    </div>
                    <div class="last">
                        奥迪A4L团购
                    </div>
                </div>
                <div class="col">
                    <div class="second">
                        奔驰C级团购
                    </div>
                    <div class="last">
                        秦DM团购
                    </div>
                    <div class="first">
                        哈弗H2团购
                    </div>
                </div>
            </div>
            <div class="search_foot">
                <div></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getJsonCarList } from "../api/carlist"
    export default {
        data(){
            return {
                toId:"dazhong",
                allData:null,
                index:0,
                carId:0,
                subnav: false
            }
        },
        methods:{
            fun(){
                this.toId = this.$route.query.userId;
                this.index = this.$route.query.index;
                this.carId = this.$route.query.id;
                console.log(this.index,"+",this.carId);
                getJsonCarList().then(data => {
                   
                    this.allData = data[this.toId].type[this.index].prop[this.carId]
                })
            }
        },
        created(){
            this.fun()
            this.$emit("car-show", true);
            
        }
    }
</script>

<style lang="scss" scoped>
.nav {
    height: 44px;
    background-color: #35447b;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

        &:nth-child(3) {
            text-align: right;
            flex: 1;
            padding-right: 10px;
            position: relative;
            i{
                display: block;
                float: right;

            }
                        .subnav {
                            width: 100px;
                            height: 170px;
                            padding: 6px;
                            border-radius: 4px;
                            position: absolute;
                            top: 35px;
                            left: 12px;
                            background: rgba(0, 0, 0, 0.8);
                            z-index: 9;
            
                            a {
                                width: 100px;
                                height: 18px;
                                padding: 8px 0;
                                text-align: center;
                                background-image: none;
                                color: #fff;
                            }
            
                            &::before {
                                content: "";
                                display: block;
                                position: absolute;
                                top: -17px;
                                left: 80px;
                                border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                                border-width: 9px;
                                border-style: dashed dashed solid dashed;
                            }
                        }
        }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 18px;
        }

        i {
            width: 25px;
            height: 22px;
            background-image: url("../assets/img/icons1.png");
            background-position: -175px -42px;
            background-size: 400px auto;
        }
    }
}

.sub_nav {
    width: 100%;
    height: 80px;
    font-size: 16px;
    margin: 0 -1px;

    ul {
        li {
            float: left;
            width: 25%;

            span {
                display: block;
                width: 100%;
                height: 39px;
                border-bottom: 1px solid #e5e5e5;
                border-left: 1px solid #e5e5e5;
                text-align: center;
                line-height: 40px;
            }

            .con {
                border-bottom-color: #4c61b0;
                color: #4c61b0;
                background-color: #eee;
            }
        }
    }
}

.car_info {
    display: flex;
    padding: 15px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;

    .left {
        flex: 2;
        display: flex;

        .img {
            flex: 1;

            img {
                padding: 5px;
                border: 1px solid #e5e5e5;
                width: 50px;
                height: 50px;
                margin: auto;
            }
        }

        .txt {
            flex: 3;
            text-indent: 10px;

            h4 {
                font-size: 14px;
                color: #333;
                font-weight: 600;
                margin-top: 8px;
            }

            span {
                font-size: 14px;
                color: #ff0000;
                display: block;
                height: 28px;
                line-height: 28px;
            }
        }
    }

    .right {
        flex: 1;

        a {
            display: block;
            width: 48px;
            height: 30px;
            padding: 0 25px;
            background-color: #f37022;
            color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            margin: 16px auto;
        }
    }
}

.car_info2 {
    ul {
        li {
            padding: 5px;
        }
    }

    li {
        &:last-of-type {
            display: flex;

            .color {
                padding-left: 5px;
                display: flex;
            }
        }
    }
}

.color {
    a {
        width: 13px;
        height: 13px;
        display: block;
        border: 1px solid #ff6600;
        margin: 5px 8px 5px 0;
        background-image: url("../assets/img/car_color_block.png");
        background-size: 100%;

        &:nth-child(1) {
            background-color: #ff0018;
        }

        &:nth-child(2) {
            background-color: #0482a9;
        }

        &:nth-child(3) {
            background-color: #858585;
        }

        &:nth-child(4) {
            background-color: #ffffff;
        }

        &:nth-child(5) {
            background-color: #a7bb02;
        }
    }
}

.wrap {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    margin: 10px 0 15px 0;

    a {
        display: flex;
        background: #eee;
        color: #666;
        justify-content: center;
    }
}

.car_tit {
    height: 32px;
    line-height: 32px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;

    h2 {
        color: #4c61b0;
        font-size: 18px;
        font-weight: 700;

        span {
            display: block;
            border-bottom: 1px solid #4c61b0;
        }
    }

    .tab {
        color: #999;
        font-size: 14px;

        span {
            color: #ff6600;
            position: relative;
            margin-right: 20px;

            &::after {
                content: "";
                display: block;
                position: absolute;
                width: 0px;
                height: 15px;
                border-right: 1px solid #999;
                top: 3px;
                right: -10px;
            }
        }
    }
}

.p_tit {
    height: 28px;
    line-height: 28px;
    color: #999;
    font-size: 16px;
    background-color: #eee;
    text-indent: 12px;
    margin-bottom: 10px;
}

.lists {
    padding: 0 10px 10px;

    h2 {
        font-size: 16px;
        color: #333;
        padding-bottom: 10px;
        font-weight: bold;
    }

    p {
        color: #999;
        font-size: 14px;
        padding-bottom: 10px;

        span {
            margin-right: 20px;
        }

        em {
            font-style: normal;
            color: #ff0000;
        }
    }

    .lists_nav {
        display: flex;
        margin: 0 -1px;
        border-radius: 4px;
        overflow: hidden;

        div {
            flex: 1;
            height: 38px;
            line-height: 38px;
            color: #333;
            font-size: 16px;
            text-align: center;
            border-right: 1px solid #e5e5e5;
            background-color: #eeeeee;
        }

        .lis {
            color: #fff;
            background-color: #ff6600;
            font-size: 16px;
        }
    }
}

.tab_col {
    span {
        color: #999 !important;
    }
}

.new {
    padding: 15px 0;

    .item {
        height: 62px;
        display: flex;
        border-bottom: 1px solid #e5e5e5;
        padding: 8px 10px;

        .img {
            width: 90px;
            height: 60px;
        }

        .txt {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 0 10px;

            h4 {
                height: 42px;
                line-height: 20px;
                font-weight: 600;
                font-size: 16px;
                color: #333;
            }

            span {
                font-size: 12px;
                color: #999;
            }
        }
    }
}

.group {
    .col {
        display: flex;
        color: #fff;
        text-align: center;

        &>div {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }

        strong {
            font-size: 16px;
        }
    }

    .first {
        flex: 2;
        background-color: #018298;
    }

    .second {
        flex: 1;
        background-color: #1255ca;
    }

    .last {
        flex: 1;
        background-color: #542fb0;
    }
}
</style>